<template>
    <div class="home-page">
        <image class="home-bg" src="../../static/image/home-bg.png" mode="widthFix" />
        <image src="../../static/image/title.png" mode="widthFix" class="title-image" />
        <!-- 列表区 -->
        <div class="home-list">
            <div
                class="list-item"
                v-for="(menu, index) in menuList"
                :key="index"
                @click="menu.click"
                :class="scanIndex === index ? 'list-selected' : ''"
            >
                <image class="left-icon" :src="`../../static/homeIcon/${menu.icon}.png`" />
                <div class="item-content">{{ menu.title }}</div>
                <image class="right-arrow" src="../../static/icons/right.png" mode="widthFix" />
            </div>
        </div>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                title="提醒"
                type="warn"
                content="是否确认退出系统?"
                @confirm="popConfirm"
            ></uni-popup-dialog>
        </uni-popup>

        <uni-popup ref="scan" type="center">
            <div class="scan-box">
                <uni-icons type="info-filled" color="#FF9F08" size="24" />
                <span class="ml-2">请扫描入库单</span>
            </div>
        </uni-popup>

        <scanUtil />
    </div>
</template>

<script lang="ts" setup>
    import { logout } from '@/api/login'
    import { userStore } from '@/store/modules/user'
    import { goTo, hasRight } from '@/utils/publicFuc'
    import scanUtil from '../component/scanUtil.vue'
    import * as qs from 'qs'

    interface list {
        icon: string
        title: string
        click: () => void
        right?: string[]
    }

    // 菜单列表
    const menuList: list[] = [
        {
            icon: 'add',
            title: '新增入库单',
            click: () => linkTo('/pages/add/index', ['0901-ADD']),
        },
        {
            icon: 'validate',
            title: '校验入库单',
            click: () => scanToLink('/pages/scan/index', ['0901-VERIFYRECEIPTS'], 1),
        },
        {
            icon: 'feed',
            title: '投喂',
            click: () => scanToLink('/pages/feed/index', ['0901-FEED'], 2),
        },
        {
            icon: 'QM',
            title: 'QM抽检',
            click: () => scanToLink('/pages/QM/index', ['0901-QMCHECK'], 3),
        },
        {
            icon: 'link',
            title: '关联SAP',
            click: () => scanToLink('/pages/sap/index', ['0901-BIND_SAP'], 4),
        },
        {
            icon: 'list',
            title: '入库单列表',
            click: () => linkTo('/pages/list/index', ['0901-PRODUCTINFO']),
        },
        {
            icon: 'logout',
            title: '退出登录',
            click: () => doLogout(),
        },
    ]

    // 退出登录
    const popup = ref<any>(null)
    const doLogout = () => {
        popup.value.open()
    }
    //注销
    const popConfirm = () => {
        logout().then(() => {
            uni.showToast({ title: '注销成功', icon: 'success', duration: 3000 })
            setTimeout(() => {
                uni.reLaunch({ url: '/pages/login/index' })
                userStore().logout()
            }, 3000)
        })
    }

    const linkTo = (url: string, right?: string[]) => {
        const flag = hasRight(right)
        if (!flag) return uni.showToast({ title: '暂无权限', icon: 'error', duration: 3000 })
        goTo(url)
    }

    const linkUrl = ref<string>('')
    const scanIndex = ref<any>()

    const scan = ref<any>(null)
    // 扫码获得入库单后跳转
    const scanToLink = (url: string, right: string[], index: number) => {
        const flag = hasRight(right)
        if (!flag) return uni.showToast({ title: '暂无权限', icon: 'error', duration: 3000 })
        // 提示用户扫码
        scan.value.open()
        setTimeout(() => {
            scan.value.close()
        }, 2000)

        linkUrl.value = url
        scanIndex.value = index
    }

    // 扫描相关
    onShow(() => {
        uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
        uni.$on('scancodedate', data => doScan(data))

        // 重置菜单状态
        linkUrl.value = ''
        scanIndex.value = undefined
    })

    onHide(() => {
        // 离开页面前清除监听器
        uni.$off('scancodedate')
    })

    // 扫描后跳转
    const doScan = (data: any) => {
        // 只有提示扫码的时候才能跳转
        if (linkUrl.value) {
            const { code } = data
            const urlParams = qs.stringify({ id: code })
            // 跳转时关闭全局监听
            uni.$off('scancodedate')
            setTimeout(() => {
                // 跳转页面
                goTo(linkUrl.value + '?' + urlParams)
            }, 500)
        }
    }
</script>

<style lang="scss" scoped>
    .home-page {
        @apply min-h-screen w-screen relative overflow-scroll bg-pagebg;
        .home-bg {
            @apply w-full absolute left-0 top-0;
        }
        .title-image {
            @apply left-1/2 absolute -translate-x-1/2;
            width: 423rpx;
            top: 190rpx;
        }

        .home-list {
            top: 345rpx;
            width: 665rpx;
            @apply absolute left-1/2 -translate-x-1/2;

            .list-item {
                @apply w-full py-8 px-6 flex items-center mb-4 bg-white box-border rounded-lg shadow-md;
                &:last-of-type {
                    @apply mb-10;
                }
                .left-icon {
                    @apply w-10 h-10;
                }
                .item-content {
                    @apply flex-1 mx-4 text-lg;
                }
                .right-arrow {
                    @apply w-2;
                }
            }

            .list-selected {
                background-color: #ffeed7;
                @apply border-primary border-solid;
            }
        }
    }

    .scan-box {
        @apply p-4 bg-white rounded-xl flex items-center;
    }
</style>
